<!DOCTYPE html>
<html>
<head>
   <!-- 页面meta -->
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <title>传智健康</title>
   <meta name="description" content="传智健康">
   <meta name="keywords" content="传智健康">
   <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
   <!-- 引入样式 -->
   <link rel="stylesheet" href="../plugins/elementui/index.css">
   <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
   <link rel="stylesheet" href="../css/style.css">
   <!--日历控件-->
   <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
   <script type="text/javascript" src="../js/moment.min.js"></script>
   <script type="text/javascript" src="../js/daterangepicker.min.js"></script>
   <link rel="stylesheet" type="text/css" href="../css/daterangepicker.css"/>

   <!-- 引入组件库 -->
   <script src="../js/vue.js"></script>
   <script src="../plugins/elementui/index.js"></script>
   <script src="../js/axios-0.18.0.js"></script>
   <!-- 引入 echarts.js -->
   <script src="../plugins/echarts/echarts.js"></script>
   <style>
      .el-dropdown-link {
         cursor: pointer;
         color: #409EFF;
      }

      .el-icon-arrow-down {
         font-size: 12px;
      }

      .select {
         border: 1px solid black;
      }
   </style>
</head>

<body class="hold-transition">
<!--<div style="width: 100%;height:20%;" id="app">-->
<div id="app">
   <!--头信息-->
   <div class="content-header">
      <h1>会员管理
         <small>会员统计</small>
      </h1>
      <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
         <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
         <el-breadcrumb-item>会员管理</el-breadcrumb-item>
         <el-breadcrumb-item>会员统计</el-breadcrumb-item>
      </el-breadcrumb>
   </div>
   <!--头信息/-->

   <div class="app-container">
      <div class="box">
         <!--搜索框-->
         <div class="filter-container">
            <el-form :inline="true" ref="form" :model="form" label-width="80px">
               <el-form-item label="">
                  <span>选择日期范围</span>
                  <el-date-picker
                     v-model="form.value"
                     type="daterange"
                     align="right"
                     unlink-panels
                     range-separator="至"
                     start-placeholder="开始日期"
                     end-placeholder="结束日期"
                     format="yyyy 年 MM 月 dd 日"
                     value-format="yyyy-MM-dd"
                     :picker-options="pickerOptions">
                  </el-date-picker>
               </el-form-item>
               <el-form-item label="">
                  <span>选择统计类型</span>
                  <el-select v-model="form.type" placeholder="统计类型">
                     <el-option label="新增会员" value="新增会员"></el-option>
                     <el-option label="预约人数" value="预约人数"></el-option>
                     <el-option label="会员总数" value="会员总数"></el-option>
                  </el-select>
               </el-form-item>
               <el-form-item>
                  <el-button type="primary" @click="onSubmit">查询</el-button>
               </el-form-item>
            </el-form>
         </div>
         <!--搜索框/-->

      </div>
   </div>


</div>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 100%;height:500px;"></div>
</body>

<script>
   // 基于准备好的dom，初始化echarts实例
   var myChart = echarts.init(document.getElementById('main'));

   // 使用刚指定的配置项和数据显示图表。
   axios.post().then().catch().finally();

   var app = new Vue({
      el: '#app',
      data: {
         pickerOptions: {
            shortcuts: [{
               text: '本月',
               onClick(picker) {
                  debugger;
                  var date = new Date();
                  const end = new Date(this.formatDate(date.getFullYear(), date.getMonth() + 1, 31));
                  const start = new Date(this.formatDate(date.getFullYear(), date.getMonth() + 1, 1));
                  picker.$emit('pick', [start, end]);
               }
            }, {
               text: '最近一周',
               onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                  picker.$emit('pick', [start, end]);
               }
            }, {
               text: '最近一个月',
               onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                  picker.$emit('pick', [start, end]);
               }
            }, {
               text: '最近三个月',
               onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                  picker.$emit('pick', [start, end]);
               }
            }, {
               text: '最近一年',
               onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
                  picker.$emit('pick', [start, end]);
               }
            }, {
               text: '去年',
               onClick(picker) {
                  const end = new Date();
                  end.setTime(end.getTime() - 3600 * 1000 * 24 * 365);
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 365 * 2);
                  picker.$emit('pick', [start, end]);
               }
            }]
         },
         form: {
            value: '',//日期范围
            type: '新增会员'
         },
         number: 0,
      },
      created() {

      },
      methods: {
         onSubmit() {

            //封装参数
            var para = {
               startDate: this.form.value[0],//起始日期
               endDate: this.form.value[1],//结束日期
               type: this.form.type
            };

            //发送ajax请求,提交
            axios.post("/member/getMemberStatistics.do", para).then((res) => {
               if (res.data.flag) {
                  //查询成功
                  myChart.setOption({
                     title: {
                        text: para.type+"/时间关系"
                     },
                     xAxis: {
                        type: 'category',
                        data: res.data.data.dateList
                     },
                     yAxis: {
                        type: 'value'
                     },
                     series: [{
                        data: res.data.data.numberList,
                        type: 'line'
                     }]
                  });
               } else {
                  //查询失败
                  this.$message.error(res.data.message);
               }
            }).catch().finally();

         }

      }

   });

</script>


</html>